<template>
  <div>
  <div class="title">
      <div class="text">商品分类</div>
  </div>
  <div class="category">
    <!-- 顶部标题区 -->
    <!-- 左侧列表栏 -->
    <scroll ref="leftscroll" class="left-scroll">
    <ul class="left-category">
      <li
      v-for="(item, index) in categorylist"
      :key="index"
       :class="[{active: activemaitKey === item.maitKey}, 'left-category-item']"
      @click="categoryClick(item.maitKey, item.miniWallkey)">
      {{item.title}}
      </li>
    </ul>
    </scroll>
    <!-- 右侧列表栏 -->
    <scroll ref="rightscroll" class="right-scroll">
      <keep-alive>
       <div class="right-category">
      <!-- 分类图标区 -->
      <div class="categoryimg-wrapper">
        <div class="categoryimg-item" v-for="(item, index) in sublist">
          <a :href="item.link">
            <img :src="item.image" @load="imageLoad">
            <span>{{item.title}}</span>
          </a>
        </div>
      </div>
      <!-- 商品推荐区域 -->
      <MiniTabbar :tabberList="['综合','新品','销量']" @tabbarClick="tabbarClick"></MiniTabbar>
      <GoodList :goods="showGoods"></GoodList>
    </div>
      </keep-alive>
    </scroll>
  </div>
  </div>
</template>

<script>
// 导入插件
import scroll from 'components/scroll/scroll.vue'

// 导入子组件
import MiniTabbar from 'components/Minitabbar/minitabbar.vue'
import GoodList from 'components/goodlist/goodlist.vue'

// 导入网络请求函数
import { getcategory, getSubcategory, getCategoryDetail } from 'network/category.js'

// 导入自定义函数
import { debounce } from 'common/utils.js'

export default {
  name: 'category',
  data() {
    return {
      // 左侧栏的数据列表
      categorylist: [],
      // 左侧栏点击了哪个分类
      activemaitKey: '3627',
      // 右侧图片列表
      sublist: [],
      // 计数器
      count: 0,
      // 列表参数
      goodslist: ['pop', 'new', 'sell'],
      // 当前列表的类型
      cuurentType: 'pop',
      // 左侧栏点击对应的miniWallkey
      activeminiWallkey: '10062603',
      // goods商品列表数据
      goods: {
        pop: { list: []},
        new: { list: []},
        sell: { list: []}
      },
    }
  },
  components: {
    scroll,
    MiniTabbar,
    GoodList
  },
  computed: {
    showGoods() {
      return this.goods[this.cuurentType].list
    }
  },
  methods: {
    // 获取左侧数据
    categoryLeft() {
      getcategory().then(res => {
        let result = res.data
        this.categorylist = result.data.category.list
      })
    },
    // 监听左侧栏点击事件
    categoryClick(maitKey, miniWallkey) {
      this.activemaitKey = maitKey
      this.activeminiWallkey = miniWallkey
      this.$refs.rightscroll.scrollTo(0, 0, 1000)
      this.categoryDetail('pop')
      this.categoryDetail('new')
      this.categoryDetail('sell')
      this.getsub()
    },
    // 获取右侧图片数据
    getsub() {
      getSubcategory(this.activemaitKey).then(res => {
        let result = res.data
        this.sublist = result.data.list
      })
    },
    // 监听图片加载完成刷新bs
    imageLoad() {
      this.count = this.count + 1
      if (this.count === this.sublist.length) {
        this.$refs.rightscroll.refresh()
        this.count = 0
      }
    },
    // tab栏点击事件
    tabbarClick(index) {
      this.cuurentType = this.goodslist[index]
      console.log(this.cuurentType)
    },
    // 获取右侧商品推荐栏
    categoryDetail(type) {
      getCategoryDetail(this.activeminiWallkey, type).then(res => {
        let result = res.data
        this.goods[type].list = result
      })
    }
  },
  created() {
    this.categoryLeft()
    this.getsub()
    this.categoryDetail('pop')
    this.categoryDetail('new')
    this.categoryDetail('sell')
  },
  mounted() {
    const refresh = debounce(this.$refs.rightscroll.refresh, 800);
    this.ItemListener = () => {
      refresh();
    };
    this.$bus.$on('imageLoad', this.ItemListener)
  },
}
</script>

<style lang='stylus' scoped>
.title
    position absolute
    top 0
    left 0
    width 100%vw
    height 44px
    line-height 44px
    text-align center
    background-color #ff8198
    color #ffffff
    z-index 9
    .text
      font-size 20px
      font-weight 700
.category
  display flex
  position relative
  .left-scroll
    position relative
    top 44px
    height 474px
    flex 0 0 100px
    overflow hidden
    background-color #f6f6f6
    .left-category
      width 100px
      list-style none
      .left-category-item
        height 45px
        line-height 45px
        text-align center
        font-size 14px
        color #666666
      .active
        border-left 3px solid #ff8198
        background-color #ffffff
        color #ff8198
  .right-scroll
    position relative
    overflow hidden
    flex 1
    top 44px
    height 474px
    .categoryimg-wrapper
      display flex
      flex-wrap wrap
      justify-content space-between
      padding 5px 8px 20px 8px
      .categoryimg-item
        width 50px
        margin 15px 8px 0 0
        img
          width 100%
        span
          display block
          margin-top 5px
          text-align center
          font-size 12px


</style>